.app_user {
    width: calc(100% - 40px);
    padding: 30px 20px;
    background: #fff;
    display: flex;
    flex-direction: row;
}

.app_userLeft {
    position: relative;
    width: 48px;
    height: 94px;
    margin-right: 16px;
    border-radius: 3px;
    background: #F7F8FF;
}

.app_userLeft .stateDom1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 34px;
    text-align: center;
    border-radius: 3px 3px 0px 0px;
    background: linear-gradient(240deg, #7095FF 0%, #3967FD 100%);
    font-size: 12px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 34px;
}

.app_userLeft .stateDom2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 34px;
    text-align: center;
    border-radius: 3px 3px 0px 0px;
    background: linear-gradient(240deg, #9098E1 0%, #55578F 100%);
    font-size: 12px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 34px;
}

.app_userRight {
    width: calc(100% - 64px);
    height: 94px;
    display: flex;
    flex-direction: column;
}

.app_userRight .title {
    height: 22px;
    font-size: 16px;
    font-weight: 500;
    color: #222222;
    line-height: 22px;
}

.app_userRight .tabs {
    margin: 3px 0;
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.app_userRight .tabs .wifi01 {
    width: fit-content;
    padding: 3px 6px;
    background: #EFFFF5;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
    color: #3BAB67;
    margin-right: 10px;
}

.app_userRight .tabs .wifi02 {
    width: fit-content;
    padding: 3px 6px;
    background: #F1F4FF;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    margin-right: 10px;
}

.app_userRight .tabs .txt {
    width: fit-content;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    background: #F1F4FF;
    border-radius: 3px;
}

.app_userRight .time {
    height: 18px;
    font-size: 12px;
    font-weight: 400;
    color: #A7ACB5;
    line-height: 18px;
}

.app_userRight .address {
    height: 18px;
    font-size: 12px;
    font-weight: 400;
    color: #A7ACB5;
    line-height: 18px;
}

.app_main {
    width: 100%;
    height: calc(100vh - 212px);
    border-top: 8px solid #F5F6FA;
    overflow: hidden;
}

.app_mainTabs {
    width: 100%;
    height: 42px;
    border-bottom: 1px solid #F8F8F8;
    display: flex;
    flex-direction: row;
}

.app_mainTabs div {
    width: 20%;
    text-align: center;
    line-height: 42px;
    font-size: 14px;
    font-weight: 400;
    color: #222222;
}

.app_mainTabs .app_mainTabsActive {
    position: relative;
    color: #3967FD;
}

.app_mainTabs .app_mainTabsActive::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: calc(50% - 18px);
    width: 36px;
    height: 3px;
    background: linear-gradient(243deg, #9DADFF 0%, #3D5CFF 100%);
    border-radius: 3px;
}

.app_mainList {
    width: calc(100% - 30px);
    padding: 15px 15px 20px;
    height: calc(100% - 63px);
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.app_mainListItem {
    height: 20px;
    display: flex;
    flex-direction: row;
}

.app_mainListItem .label {
    width: 72px;
    margin-right: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    text-align: right;
}

.app_mainListItem .txt {
    width: calc(100% - 78px);
    font-size: 12px;
    font-weight: 400;
    color: #555555;
}

.app_mainTable {
    display: flex;
    flex-direction: column;
}

.app_mainTableTitle {
    height: 24px;
    font-size: 12px;
    font-weight: 400;
    color: #8B8B8B;
    line-height: 24px;
}

.app_maintableDemo {
    width: calc(100% - 2px);
    border: 1px solid #EDEEF4;
}

.app_maintableDemoTitle {
    height: 28px;
    background: #F7F7FB;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #EDEEF4;
}

.app_maintableDemoTitle div {
    width: 33.3%;
    height: 28px;
    text-align: center;
    line-height: 28px;
    font-size: 12px;
    font-weight: 400;
    color: #555555;
}

.app_maintableDemoTitle div:nth-of-type(1) {
    width: calc(33.3% - 1px);
    border-right: 1px solid #EDEEF4;
}

.app_maintableDemoTitle div:nth-of-type(2) {
    width: calc(33.3% - 1px);
    border-right: 1px solid #EDEEF4;
}

.app_maintableDemoitem {
    height: 28px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #EDEEF4;
}

.app_maintableDemoitem div {
    width: 33.3%;
    height: 28px;
    text-align: center;
    line-height: 28px;
    font-size: 12px;
    font-weight: 400;
    color: #555555;
}

.app_maintableDemoitem div:nth-of-type(1) {
    width: calc(33.3% - 1px);
    border-right: 1px solid #EDEEF4;
}

.app_maintableDemoitem div:nth-of-type(2) {
    width: calc(33.3% - 1px);
    border-right: 1px solid #EDEEF4;
}

.app_maintableDemoitem:last-of-type {
    border: unset;
}

.app_mainList_item {
    width: calc(100% - 24px);
    padding: 12px;
    box-shadow: 0px 2px 9px 0px rgb(23 34 198 / 11%);
    margin-bottom: 10px;
}

.app_mainList_itemTitle {
    font-size: 12px;
    font-weight: 500;
    color: #333333;
    line-height: 22px;
}

.app_mainList_itemTime {
    font-size: 12px;
    font-weight: 400;
    color: #C2C1C1;
    line-height: 22px;
}

.app_mainList_itemName {
    font-size: 12px;
    font-weight: 400;
    color: #777B85;
    line-height: 22px;
}

.app_mainList_item1 {
    width: 100%;
    height: 26px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 5px 0;
}

.app_mainList_item1Name {
    width: calc(100% - 60px);
    height: 26px;
    line-height: 26px;
    font-size: 12px;
    color: #3967FD;
    text-decoration: underline;
}

.app_mainList_itemBtn {
    width: 60px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    border: 1px solid #EDEEF4;
}

.app_mainList .nut-row .nut-col-6 .flex-content {
    height: 80px;
    background: rgba(245, 246, 250, 0.46);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.app_mainList .nut-row {
    margin-bottom: 16px;
}

.app_mainList .nut-row .nut-col-6 .flex-content .flex-contentNum {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #222222;
}

.app_mainList .nut-row .nut-col-6 .flex-content .flex-contentTxt {
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #969AA3
}

.app_mainListEcharts {
    margin: 20px 0;
    width: 100%;
    height: 240px;
}

.app_mainListTable {
    display: flex;
    flex-direction: column;
}

.app_mainListTableTitle {
    height: 24px;
    font-size: 12px;
    font-weight: 400;
    color: #8B8B8B;
    line-height: 24px;
}

.app_mainListTableDemo {
    width: calc(100% - 2px);
    border: 1px solid #EDEEF4;
}

.app_mainListTableDemoTitle {
    height: 28px;
    background: #F7F7FB;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #EDEEF4;
}

.app_mainListTableDemoTitle div {
    height: 28px;
    text-align: center;
    line-height: 28px;
    font-size: 12px;
    font-weight: 400;
    color: #555555;
}

.app_mainListTableDemoTitle div:nth-of-type(1) {
    width: calc(30% - 1px);
    border-right: 1px solid #EDEEF4;
}

.app_mainListTableDemoTitle div:nth-of-type(2) {
    width: calc(70% - 1px);
}

.app_mainListTableDemoitem {
    height: 28px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #EDEEF4;
}

.app_mainListTableDemoitem div {
    height: 28px;
    text-align: center;
    line-height: 28px;
    font-size: 12px;
    font-weight: 400;
    color: #555555;
}

.app_mainListTableDemoitem div:nth-of-type(1) {
    width: calc(30% - 1px);
    border-right: 1px solid #EDEEF4;
}

.app_mainListTableDemoitem div:nth-of-type(2) {
    width: calc(70% - 1px);
    border-right: 1px solid #EDEEF4;
}

.app_mainListTableDemoitem:last-of-type {
    border: unset;
}